이번 포스팅에서는 화면(viewport) 너비에 따라서 적절히 반응하는 글꼴을 CSS로 어떻게 스타일하는지 알아보겠습니다. Media Queries 반응형 글꼴하면 가장 쉽게 떠올리리 수 있는 방법이 바로 미디어 쿼리(media query)를 사용하는 것입니다. 예를 들어, 화면 너비가 480px 이상과 1024px 이상이 되었을 때 HTML의 여러 요소(element)와 클래스(class)에 적용된 글자 크기가 자동으로 늘어나게 스타일해볼까요? 오래전 부터 쓰이던 이 방법은 보시다시피 동일한 CSS 선택자에 대해서 여러 번 스타일
CSS 변수는 예전에는 Sass나, LESS, Stylus와 같은 CSS 전처리기(CSS preprocessor)를 통해서 접할 수 있었던 기능이었습니다. 하지만 최근에는 CSS 스펙 자체에 CSS 변수 개념이 추가되어 이제 CSS 전처리기 없이도 부담없이 CSS 변수를 사용할 수 있게 되었는데요. 이번 포스팅에서는 CSS 사용자 정의 속성(CSS custom properties)라고도 알려진 CSS 변수(CSS variables)에 대해서 알아보겠습니다. CSS 변수 정의 CSS 변수가 CSS 사용자 정의 속성이라고 불리는 이유는
다크 모드(dark mode)는 야간에 눈을 편안하게 하고 작업의 집중도를 높을 수 있도록 시스템 전반에 어두운 색생 체계를 적용해주는 운영 체제의 기능입니다. 2018년에 macOS Mojave에 처음으로 소개된 다크 모드는 현재 Windows 10을 비롯하여 많은 운영 체제에서 지원하는데요. 이에 따라 점점 많은 애플리케이션과 웹사이트가 운영 체제의 다크 모드에서 어울리는 어두운 계열의 스타일을 추가하고 있는 추세입니다. 라이트 모드 스타일링 예전에는 웹사이트를 스타일할 때 전반적으로 밝은 배경색에 어두운 글자색을 사용하는 것이
버튼은 웹 에서 사용자와 상호 작용에 있어서 핵심이 되는 요소로서 하나의 웹 애플리케이션에서도 여러 종류의 버튼이 필요하기 마련입니다. 이번 포스팅에서는 다앙한 크기와 형태의 버튼을 표현하기 위해 사용할 수 있는 React로 컴포넌트를 함께 개발해보도록 하겠습니다. 컴포넌트 함수 우선 disabled와 children prop을 인자로 받고 아무 스타일링없이 단순히 <button> HTML 엘리먼트를 반환하는 간단한 컴포넌트 함수를 작성합니다. 지금부터 React에서 Styled Components 라이브러리를 사용해서 이 버튼 컴
HTML과 CSS를 이용하여 다음과 같은 웹에서 흔히 볼 수 있는 버튼을 만들어보도록 하겠습니다. HTML 작성 먼저 4가지 종류(기본, 성공, 오류, 경고)의 버튼에 대한 HTML을 작성합니다. 디폴트 스타일 제거 대부분의 브라우저는 User Agent Style이라고 불리는 디폴트(default) 스타일을 버튼에 적용해줍니다. 아무 스타일을 적용하지 않더라도 <button/> 엘리먼트가 시각적으로 버튼처럼 보이게 하기 위함인데요. 아이러니하게도 커스텀 스타일을 적용할 때는 이러한 브라우저 별로 조금씩 상이한 이 디폴트 스타일이